<template>
  <el-card style="margin-top: 15px;">
    <el-table :data="state.roleData" border style="width: 100%">
  <el-table-column prop="roleId" label="角色ID"  />
  <el-table-column prop="roleName" label="角色名称"  />
</el-table>
  </el-card>

</template>

<script setup lang="ts">
import { inject, onMounted, reactive } from 'vue';


import {
  getRoles
} from '@/api/system/RoleManage'

async function getRole() {
var { data } = await getRoles()
console.log(data);
state.roleData =data.data
}


onMounted(() => {
getRole();
})


const state = reactive({
roleData:[]
}
)

</script>
<style scoped lang="less">
</style>